<template>
  <div class="">
    <app-title title="审核列表"></app-title>
    <div class="content-wrapper">
      <ul class="app-list">
        <li v-for="app in appList">
          <div class="app-info">
            <div class="app-icon">
              <img src="../../../assets/app-icon.png" alt="">
            </div>
            <div class="app-desc">
              <h3>{{app.name}}</h3>
              <dl>
                <dt>应用包名:</dt>
                <dd>{{app.packageName}}</dd>
                <dt>应用版本:</dt>
                <dd>{{app.version}}</dd>
                <dt>提交时间:</dt>
                <dd>{{app.time}}</dd>
              </dl>
            </div>
          </div>
          <div class="check-info-button">
            <el-button type="primary" @click="checkInfo">查看应用信息</el-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import AppTitle from '../AppTitle'
  export default {
    data(){
      return {
        appList:[
          {
            name: 'Photoshop移动办公平台',
            packageName: 'com.photoshop.link',
            version: '1.0.1',
            status: '未发布',
          },
          {
            name: 'Photoshop移动办公平台',
            packageName: 'com.photoshop.link',
            version: '1.0.1',
            status: '审核中',
          },
          {
            name: 'Photoshop移动办公平台',
            packageName: 'com.photoshop.link',
            version: '1.0.1',
            status: '已通过',
          },
          {
            name: 'Photoshop移动办公平台',
            packageName: 'com.photoshop.link',
            version: '1.0.1',
            status: '未通过',
          },{
            name: 'Photoshop移动办公平台',
            packageName: 'com.photoshop.link',
            version: '1.0.1',
            status: '已上线',
          }
        ]
      }
    },
    methods:{
      releaseApp(){
        this.$router.push('/application/app-entry/upload-app/upload-file')
      },
      checkStatus(status){
        switch (status) {
          case '审核中':
            this.$router.push('/application/app-entry/app-status/to-be-reviewed')
            break;
          case '未通过':
            this.$router.push('/application/app-entry/app-status/failed')
            break;
          case '已通过':
            this.$router.push('/application/app-entry/app-status/passed')
            break;
          default:
            console.log(status)
            break
        }
      },
      setReleasing(){
        this.$prompt('请选择上线日期', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      checkInfo(){
        this.$router.push('/application/app-review/review-page')
      }
    },
    components: {
      "app-title": AppTitle
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .content-wrapper{
    padding: 0 24px 24px 24px ;
    .app-list{
      padding: 0;
      margin-top: 0;
      li{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #cbcbcb;
        .app-info{
          display: flex;
          justify-content: space-between;
          .app-icon{
            position: relative;
            width: 50px;
            height: 50px;
            margin-right: 20px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .app-desc{
            h3{
              font-size: 18px;
              font-weight: 400;
              color: #1f2f3d;
              margin: 0 0 18px 0;
            }
            dl{
              margin-bottom: 4px;
              dt{
                clear: left;
              }
              dt, dd{
                float: left;
                display: inline-block;
                // line-height: 22px;
                font-size: 14px;
                font-weight: 400;
                margin-bottom: 6px;
              }
            }
          }
        }
      }
    }
  }
</style>
